<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import infomask from './component/infomask.vue'

  const blindboxId = ref()
  const blindboxDetail = ref()
  const caseId = ref(0)
  // 优惠券id
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  const probality = ref('')
  //tab数据
  const items = ref(['奖池预览', '开赏记录'])
  const current = ref(0)
  // 盲盒详情
  const isReservation = ref(0)
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: caseId.value,
      },
    })
    blindboxDetail.value = res.data
    caseId.value = res.data.case_info.id
    const keys = ref([])
    blindboxDetail.value.box.probability_show.forEach((item) => {
      keys.value.push(`${Object.keys(item)}:${item[Object.keys(item)]}%`)
    })
    probality.value = keys.value.join('  ')
    if (res.data.box.is_cc == 1) {
      items.value = ['奖池预览', '开赏记录', '冲冲赏']
    }
    isReservation.value = res.data.is_subscription
  }

  //去我的奖品
  function toMyReward() {
    uni.reLaunch({
      url: '/pages/bag/index',
    })
  }
  // 开赏记录
  const prizePage = ref(1)
  const openRewardList = ref([])
  const prizeFlag = ref(true)
  async function openReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    ccRewardList.value = []
    if (prizeFlag.value) {
      const res = await http.request({
        url: '/api/box/winLog_heaven',
        method: 'POST',
        data: {
          page: prizePage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        prizeFlag.value = false
        --prizePage.value
        return
      }
      console.log(res.data)
      openRewardList.value = [...openRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function prizeLower() {
    ++prizePage.value
    openReward()
  }
  // 冲冲赏排行榜
  const ccRewardList = ref([])
  const ccPage = ref(1)
  const ccFlag = ref(true)
  async function ccReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    openRewardList.value = []
    if (ccFlag.value) {
      const res = await http.request({
        url: '/api/box/ccRanking',
        method: 'POST',
        data: {
          page: ccPage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        ccFlag.value = false
        --ccPage.value
        return
      }
      ccRewardList.value = [...ccRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function chongchongLower() {
    ++ccPage.value
    ccReward()
  }

  // 上一箱下一箱
  function prevent() {
    current.value = 0
    const boxindex = ref(0)
    console.log(blindboxDetail.value.case_info.id)
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (index == 0) {
          if (choosenow.value == 1) {
            uni.utils.toast('已经是第一个了~')
            return
          } else {
            --choosenow.value
            await getboxList()
            let chage = JSON.parse(JSON.stringify(boxchangeList.value))
            caseId.value = chage[chage.length - 1].id
            getblindboxDetail()
          }
        } else {
          if (index != 0) {
            boxindex.value = --index
          } else {
            boxindex.value = 0
          }
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function next() {
    current.value = 0
    const boxindex = ref(0)
    if (JSON.parse(JSON.stringify(boxchangeList.value)).length == 0) {
      uni.utils.toast('已经是最后一个了~')
    }
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (
          index ==
          JSON.parse(JSON.stringify(boxchangeList.value)).length - 1
        ) {
          ++choosenow.value
          await getboxList()
          console.log(boxchangeList.value.length)
          if (boxchangeList.value.length == 0) {
            uni.utils.toast('已经是最后一个了~')
            --choosenow.value
            return
          } else {
            boxindex.value = 0
            caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
              boxindex.value
            ].id
            getblindboxDetail()
          }
        } else {
          boxindex.value = ++index
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function onClickItem(e) {
    if (current.value !== e.currentIndex) {
      current.value = e.currentIndex
    }
    if (e.currentIndex == 1) {
      prizePage.value = 1
      prizeFlag.value = true
      openRewardList.value = []
      openReward()
    } else if (e.currentIndex == 2) {
      ccPage.value = 1
      ccFlag.value = true
      ccRewardList.value = []
      ccReward()
    } else {
      openRewardList.value = []
      ccRewardList.value = []
    }
    console.log(e.currentIndex)
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)
  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  // 换箱
  const boxpopup = ref()
  const boxchangeList = ref([])
  const totalBoxPage = ref(1)
  async function getboxList() {
    const res = await http.request({
      url: '/api/box/getCase',
      method: 'POST',
      data: {
        page: choosenow.value,
        limit: 20,
        id: blindboxId.value,
      },
    })
    boxchangeList.value = res.data
    totalBoxPage.value = res.maxPage
  }
  const choosenow = ref(1)
  async function changebox() {
    await getboxList()
    boxpopup.value.open('bottom')
  }
  function closepop() {
    boxpopup.value.close()
  }
  function switchbox(index) {
    choosenow.value = index
    getboxList()
  }
  // 选择箱子
  function changeTheBox(id) {
    current.value = 0
    caseId.value = id
    ccRewardList.value = []
    openRewardList.value = []
    getblindboxDetail()
    boxpopup.value.close()
  }

  //预约
  async function reservationTX() {
    if (isReservation.value == 1) {
      return
    }
    const res = await http.request({
      url: '/api/box/ysPost',
      method: 'POST',
      data: {
        id: blindboxId.value,
      },
    })
    if (res.st == 1) {
      isReservation.value = 1
      uni.utils.toast('订阅成功')
    } else {
      uni.utils.toast('订阅失败')
    }
  }

  // 规则
  const rulepopup = ref()
  function rulePOP() {
    rulepopup.value.open('bottom')
  }

  onLoad((option) => {
    blindboxId.value = option.id
  })

  onShow(() => {
    current.value = 0
    getblindboxDetail()
    getboxList()
    uni.$once('thecoupon', (data) => {
      console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = paymoney.value - data.coupon.money
        } else if (data.coupon.type == 2) {
          realmoney.value = paymoney.value - data.coupon.money
        } else if (data.coupon.type == 3) {
          realmoney.value = paymoney.value * data.coupon.discount
        }
      }
    })
  })
</script>

<template>
  <view class="tx-content">
    <view class="top">
      <view class="rules" @click="rulePOP"> 规则 </view>
      <view class="my-reward" @click="toMyReward"> </view>
      <view class="title">
        <text style="margin-right: 20rpx">{{
          '第' +
          blindboxDetail.case_info.name +
          '/' +
          blindboxDetail.box.case_num +
          '箱'
        }}</text>
        <text>赏池剩余：</text>
        <text style="color: #ece74c">{{
          blindboxDetail.case_info.leftover + '/' + blindboxDetail.case_info.sum
        }}</text>
      </view>
      <view class="top-content">
        <view class="left">
          <image
            style="width: 212rpx; height: 212rpx"
            :src="blindboxDetail.box.img"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="right-top">
            {{ blindboxDetail.box.name }}
          </view>
          <view class="right-bottom">
            <view class="bottom-left">
              <text>￥</text>
              <text>{{ blindboxDetail.box.price + '/抽' }}</text>
            </view>
            <view class="bottom-right" @click="changebox"> </view>
          </view>
        </view>
      </view>
    </view>
    <view class="choose">
      <view class="left" @click="prevent"> 上一箱 </view>
      <view class="center">
        <view class="uni-padding-wrap uni-common-mt">
          <uni-segmented-control
            :current="current"
            :values="items"
            style-type="text"
            active-color="#9E77F6"
            @clickItem="onClickItem"
          />
        </view>
        <view class="content">
          <view v-if="current === 0">
            <view class="content-text">
              <uni-notice-bar
                v-if="probality.length > 6"
                :speed="35"
                color="#CBCBF8"
                background-color="#130D34"
                scrollable
                :text="probality"
              />
              <view class="probality-bar" v-else>
                {{ probality }}
              </view>
              <scroll-view
                scroll-y="true"
                class="scroll-Y"
                style="height: 57vh"
              >
                <view class="goods-list">
                  <view
                    class="list-item"
                    v-for="(item, index) in blindboxDetail.goods_info"
                    :key="item.goods_name + index"
                    @click="goodsinfo(index)"
                  >
                    <view class="list-item-img">
                      <image
                        style="
                          position: absolute;
                          top: 0;
                          left: 0;
                          height: 40rpx;
                        "
                        :src="item.rule_img"
                        mode="heightFix"
                      ></image>
                      <text
                        style="
                          position: absolute;
                          top: 8rpx;
                          right: 12rpx;
                          font-size: 18rpx;
                        "
                        >{{ item.leftover + '/' + item.num }}</text
                      >
                      <image
                        style="width: 164rpx; height: 164rpx"
                        :src="item.img"
                        mode=""
                      ></image>
                      <view
                        v-if="
                          item.leftover == 0 &&
                          item.rule_id != 6 &&
                          item.rule_id != 5 &&
                          item.rule_id != 7
                        "
                        class="sale-out"
                        style=""
                      >
                        售罄
                      </view>
                      <view
                        v-if="
                          (item.rule_id == 6 ||
                            item.rule_id == 5 ||
                            item.rule_id == 7) &&
                          item.leftover == 0
                        "
                        class="sale-out"
                        style=""
                      >
                        已开奖
                      </view>
                      <view
                        class="scroll"
                        v-if="item.stage_start != 0 && item.stage_end != 0"
                      >
                        <uni-notice-bar
                          :speed="10"
                          color="#CBCBF8"
                          background-color="rgba(19, 13, 52, .5)"
                          scrollable
                          :text="`${item.stage_start}-${item.stage_end}发内随机送出`"
                        />
                      </view>
                    </view>
                    <view
                      class="list-item-img-name"
                      style="
                        width: 164rpx;
                        margin-top: 12rpx;
                        font-size: 17rpx;
                        text-align: center;
                      "
                      >{{ item.goods_name }}</view
                    >
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view v-if="current === 1">
            <view class="content-text">
              <scroll-view
                scroll-y="true"
                class="scroll-Y"
                style="height: 47vh"
                @scrolltolower="prizeLower"
              >
                <view class="prize-list">
                  <view
                    class="prize-item"
                    v-for="item in openRewardList"
                    :key="'openreward' + item.id"
                  >
                    <view class="head">
                      <image
                        style="width: 84rpx; height: 84rpx; flex-shrink: 0"
                        :src="item.himg"
                        mode=""
                      ></image>
                    </view>
                    <view class="prize-info">
                      <view class="text">
                        <view style="font-size: 24rpx">
                          {{ item.nickname.substring(0, 5) + '**' }}
                        </view>
                        <view style="font-size: 20rpx; color: #8e8d8d">
                          {{ parseTime(item.add_time) }}
                        </view>
                      </view>
                      <view class="prize-right">
                        <view style="text-align: right">
                          {{ item.rule_name }}
                        </view>
                        <view class="prize-name" style="text-align: right">
                          {{ item.goods_name }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view v-if="current === 2">
            <view class="content-text">
              <scroll-view
                scroll-y="true"
                class="scroll-Y"
                style="height: 47vh"
                @scrolltolower="chongchongLower"
              >
                <view class="chongchong-list">
                  <view
                    class="chongchong-item"
                    v-for="(item, index) in ccRewardList"
                    :key="cc + item.user_id"
                  >
                    <view class="index"> {{ index + 1 }}</view>
                    <view class="avatar">
                      <image
                        style="width: 76rpx; height: 76rpx"
                        :src="item.himg"
                        mode=""
                      ></image>
                    </view>
                    <view class="name">
                      <text>{{ item.nickname.substring(0, 2) + '****' }}</text>
                      <text>{{ item.buy_num + '发' }}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
      <view class="right" @click="next"> 下一箱 </view>
    </view>

    <view class="tx-bottom">
      <view
        class="reservation"
        :class="{
          'reservation-bg': isReservation == 0,
          'reservation-bg-ok': isReservation == 1,
        }"
        @click="reservationTX"
      >
      </view>
      <view class="abandon">
        开售时间：{{ parseTime(blindboxDetail.box.ys_time) }}
      </view>
    </view>
    <infomask
      v-if="showmask"
      @close-mask="closeMask"
      :maskindex="maskindex"
      :thegoods="blindboxDetail.goods_info"
      :boxId="blindboxDetail.box.id"
    ></infomask>

    <!-- 换箱弹出层 -->
    <uni-popup ref="boxpopup" type="bottom">
      <view class="buypopup-content">
        <view class="pop-top"> 选择箱子 </view>
        <view class="pop-info">
          {{
            '当前第' +
            blindboxDetail.case_info.name +
            '/' +
            blindboxDetail.box.case_num +
            '箱'
          }}
        </view>
        <view class="choose-box">
          <scroll-view class="scroll-view" scroll-x="true" scroll-left="900">
            <view
              v-for="item in totalBoxPage"
              :key="'totalboxpage' + item"
              :id="item"
              class="choose-item"
              :class="{ 'choose-item-active': choosenow == item }"
              @click="switchbox(item)"
              >{{ `${item * 20 - 19}-${item * 20}箱` }}</view
            >
          </scroll-view>
        </view>

        <scroll-view scroll-y="true" class="scroll-Y" style="height: 55vh">
          <view class="box-list">
            <view
              @click="changeTheBox(item.id)"
              class="box-list-item"
              v-for="(item, index) in boxchangeList"
              :key="'boxchangelist' + item.id"
            >
              <view class="list-mask" v-if="item.leftover == 0"> 已售罄 </view>
              <view class="box-list-item-left">
                <view class="box-index">
                  {{ `第${index + choosenow * 20 - 19}箱` }}
                </view>
                <view class="sy-num">
                  {{ `剩${item.leftover}张` }}
                </view>
              </view>
              <scroll-view scroll-y="true" class="scroll-Y" style="height: 80%">
                <view class="box-list-item-right">
                  <view
                    class="right-item"
                    v-for="level in item.goods_info"
                    :key="'level' + level.rule_id"
                  >
                    <image
                      class="word"
                      :src="level.rule_img"
                      mode="heightFix"
                    ></image>
                    <text class="number">{{
                      `${level.sum_leftover}/${level.sum_num}`
                    }}</text>
                  </view>
                </view>
              </scroll-view>
              <view class="participate" v-if="item.is_cy == 1"> 已参与 </view>
            </view>
          </view>
        </scroll-view>
        <view class="pop-close" @click="closepop"></view>
      </view>
    </uni-popup>
    <!-- 规则弹出层 -->
    <uni-popup ref="rulepopup" type="bottom">
      <view class="rulepopup-content"> 规则 </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    /* #ifndef APP-NVUE */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* #endif */
  }

  .tx-content {
    height: 100vh;
    padding-top: 32rpx;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #1a133f;
    color: white;

    .top {
      position: relative;
      height: 402rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/tx-top-contant.png')
        no-repeat;
      background-size: 100%;
      .rules {
        position: absolute;
        top: 12rpx;
        left: 56rpx;
        width: 63rpx;
        height: 31rpx;
        background-color: #282968;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        text-align: center;
      }
      .my-reward {
        position: absolute;
        top: -32rpx;
        right: 18rpx;
        width: 133rpx;
        height: 133rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/my-gift.png')
          no-repeat;
        background-size: contain;
      }
      .title {
        width: 100%;
        padding-top: 34rpx;
        box-sizing: border-box;
        text-align: center;
        font-size: 26rpx;
      }

      .top-content {
        display: flex;
        align-items: center;
        margin: 56rpx 0 0 61rpx;

        .left {
          width: 212rpx;
          height: 212rpx;
          border-radius: 15rpx;
          overflow: hidden;
          margin-right: 35rpx;
          border: 1px solid $all-color;
        }

        .right {
          width: 60%;
          height: 204rpx;
          padding-right: 10rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .right-top {
            font-size: 40rpx;
            font-weight: 800;
            font-style: italic;
            text-shadow: 2px 2px 2px $all-color;
          }

          .right-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .bottom-left {
              text-shadow: 2px 2px 2px $all-color;
            }

            .bottom-right {
              position: relative;
              top: 14rpx;
              width: 164rpx;
              height: 52rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/change.png')
                no-repeat;
              background-size: 100%;
            }
          }
        }
      }
    }

    .choose {
      position: relative;
      width: 100%;
      display: flex;
      margin-top: 29rpx;

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 155rpx;
        height: 66rpx;
        padding-left: 22rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/next_page.png')
          no-repeat;
        background-size: 100%;
        font-size: 30rpx;
        line-height: 66rpx;
      }

      .center {
        width: 100%;

        ::v-deep .uni-padding-wrap {
          width: 100%;
          padding: 0 155rpx;
          box-sizing: border-box;

          .segmented-control__item {
            justify-content: space-between !important;
          }

          .segmented-control__text {
            width: 100%;
            font-size: 28rpx !important;
            color: white !important;
          }
        }
      }

      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 155rpx;
        height: 66rpx;
        padding-right: 22rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/previous_page.png')
          no-repeat;
        background-size: 100%;
        font-size: 30rpx;
        text-align: right;
        line-height: 66rpx;
      }

      .content {
        ::v-deep .uni-noticebar {
          height: 46rpx;
          margin-top: 18rpx;

          .uni-noticebar__content-text {
            font-size: 24rpx;
          }
        }

        .content-text {
          .probality-bar {
            height: 46rpx;
            margin-top: 18rpx;
            background-color: rgba(19, 13, 52, 1);
            font-size: 24rpx;
          }
        }

        .goods-list {
          // height: 57vh;
          display: flex;
          justify-content: space-evenly;
          flex-wrap: wrap;
          padding: 0 14rpx;
          // overflow: auto;

          .list-item {
            margin-top: 19rpx;
            // margin-right: 6rpx;
            // margin-right: 8rpx;
            &:nth-child(4n) {
              margin-right: 0;
            }
            .list-item-img {
              position: relative;
              width: 177rpx;
              height: 177rpx;
              padding: 8rpx;
              margin-bottom: 15rpx;
              box-sizing: border-box;
              background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/goodslist.png')
                no-repeat;
              background-size: contain;

              &:nth-child(4n) {
                margin-right: 0 !important;
              }
              .sale-out {
                position: absolute;
                top: 0;
                left: 0;
                width: 177rpx;
                height: 177rpx;
                background-color: rgba(26, 19, 63, 0.8);
                line-height: 177rpx;
                text-align: center;
              }
              .scroll {
                position: absolute;
                left: 0;
                bottom: -18rpx;
                width: 100%;
                ::v-deep .uni-noticebar {
                  height: 32rpx;
                  .uni-noticebar__content-text {
                    font-size: 18rpx;
                  }
                }
              }
            }
            .list-item-img-name {
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 限制为两行 */
              -webkit-box-orient: vertical;
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis; /* 超出部分用省略号表示 */
              white-space: normal; /* 允许换行 */
              /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
            }

            &:last-child {
              margin-bottom: 242rpx !important;
            }
          }
        }

        .prize-list {
          // height: 61vh;
          padding-top: 22rpx;
          // overflow: auto;

          .prize-item {
            display: flex;
            align-items: center;
            padding: 13rpx 30rpx;
            box-sizing: border-box;

            &:last-child {
              margin-bottom: 242rpx;
            }

            .head {
              width: 84rpx;
              height: 84rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 25rpx;
              box-sizing: border-box;
            }

            .prize-info {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 84%;

              .text {
                height: 84rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }

              .prize-right {
                height: 84rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 26rpx;
                .prize-name {
                  width: 260rpx;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; /* 限制为一行 */
                  -webkit-box-orient: vertical;
                  overflow: hidden; /* 隐藏超出部分 */
                  text-overflow: ellipsis; /* 超出部分用省略号表示 */
                  white-space: normal; /* 允许换行 */
                  /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
                }
              }
            }
          }
        }

        .chongchong-list {
          // height: 61vh;
          // overflow: auto;
          padding-top: 10rpx;

          .chongchong-item {
            display: flex;
            align-items: center;
            height: 92rpx;
            border-radius: 6rpx;
            margin: 10rpx 30rpx;
            padding: 0 18rpx 0 35rpx;
            box-sizing: border-box;

            &:first-child {
              background: linear-gradient(0deg, #d538ec, #e06df0);

              .index {
                font-size: 30rpx;
              }
            }

            &:nth-child(2) {
              background: linear-gradient(0deg, #3b6bda, #36adea);
              .index {
                font-size: 30rpx;
              }
            }

            &:nth-child(3) {
              background: linear-gradient(0deg, #9e77f6, #7341e5);
              .index {
                font-size: 30rpx;
              }
            }
            &:last-child {
              margin-bottom: 242rpx;
            }

            .index {
              margin-right: 24rpx;
              font-style: italic;
              font-size: 25rpx;
            }

            .avatar {
              width: 76rpx;
              height: 76rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 103rpx;
              flex-shrink: 0;

              image {
                flex-shrink: 0;
              }
            }

            .name {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 26rpx;
            }
          }
        }
      }
    }

    .tx-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      z-index: 99;
      height: 242rpx;
      width: 100%;
      background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/bottom.png')
        no-repeat;
      background-size: 100%;

      .reservation {
        width: 700rpx;
        height: 120rpx;
      }

      .reservation-bg {
        background: url('https://ojqn.wm2177.com/wechat_imgs/is-presale.png')
          no-repeat;
        background-size: 100%;
      }
      .reservation-bg-ok {
        background: url('https://ojqn.wm2177.com/wechat_imgs/have-presale.png')
          no-repeat;
        background-size: 100%;
      }

      .abandon {
        width: 100%;
        margin-top: 4rpx;
        text-align: center;
        font-size: 22rpx;
        color: #cbcbf8;
      }
    }
    .buypopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      height: 1170rpx;
      padding: 32rpx;
      background-color: #1a133f;
      box-sizing: border-box;
      .pop-top {
        font-style: italic;
        text-shadow: 2px 2px 2px $all-color;
        font-size: 45rpx;
        text-align: center;
      }
      .pop-info {
        margin-top: 22rpx;
        font-size: 24rpx;
      }
      .choose-box {
        height: 62rpx;
        width: 100%;
        margin-top: 48rpx;
        margin-bottom: 32rpx;
        .scroll-view {
          height: 100%;
          white-space: nowrap;
          .choose-item {
            display: inline-block;
            width: 168rpx;
            height: 100%;
            background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/odds-second.png')
              no-repeat;
            background-size: 100%;
            flex-shrink: 0;
            font-size: 25rpx;
            text-align: center;
            line-height: 62rpx;
          }
          .choose-item-active {
            background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/odds-first.png')
              no-repeat !important;
            background-size: contain !important;
          }
        }
      }
      .box-list {
        width: 100%;
        .box-list-item {
          position: relative;
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 225rpx;
          border: 1px solid rgba(255, 255, 255, 0.24);
          padding-left: 6rpx;
          margin: 34rpx 0;
          box-sizing: border-box;
          .participate {
            position: absolute;
            top: 0;
            left: 0;
            width: 110rpx;
            height: 44rpx;
            background-color: #ffb400;
            border-radius: 0 22rpx 22rpx 0;
            font-size: 24rpx;
            line-height: 44rpx;
            text-align: center;
          }
          .list-mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(26, 19, 63, 0.8);
            // z-index: 99;
            line-height: 225rpx;
            text-align: center;
          }
          .box-list-item-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 205rpx;
            height: 177rpx;
            margin-right: 20rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/list-back.png')
              no-repeat;
            background-size: 100%;
            flex-shrink: 0;
            font-size: 20rpx;
            text-align: center;
            .box-index {
              width: 148rpx;
              height: 52rpx;
              margin: 60rpx 0 11rpx 12rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/box-index.png')
                no-repeat;
              background-size: contain;
              font-size: 26rpx;
              line-height: 52rpx;
            }
          }
          .box-list-item-right {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            // height: 100%;
            // overflow: auto;
            align-items: center;
            .right-item {
              display: flex;
              align-items: flex-end;
              margin-right: 30rpx;
              margin-bottom: 28rpx;
              &:nth-child(4n) {
                margin-right: 0;
              }
              .word {
                display: inline-block;
                // width: 38rpx;
                height: 38rpx;
                margin-right: 17rpx;
                text-align: center;
                font-size: 49rpx;
              }
              .number {
                font-size: 22rpx;
              }
            }
          }
        }
      }
      .pop-close {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        width: 63rpx;
        height: 57rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/close.png')
          no-repeat;
        background-size: 100%;
      }
    }
    .rulepopup-content {
      height: 1117rpx;
      background-color: #fff;
      color: black;
    }
    .paypopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 771rpx;
      padding: 63rpx 30rpx 0 30rpx;
      box-sizing: border-box;
      background-color: rgba(26, 19, 63, 0.9);
      color: #e1e1e1;
      .top-boxinfo {
        width: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        .boxinfo-left {
          width: 184rpx;
          height: 184rpx;
          border-radius: 6rpx;
          overflow: hidden;
          margin-right: 12rpx;
        }
        .boxinfo-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 180rpx;
        }
      }
      .choose-coupon {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 47rpx;
        flex-shrink: 0;
      }
      .pays {
        width: 100%;
        .pays-title {
          margin: 24rpx 0 13rpx 0;
          font-size: 24rpx;
        }
        .radio-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 13rpx 0;

          border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
          &:last-child {
            border: none;
          }
          .radio-item-left {
            display: flex;
            align-items: center;
          }
        }
      }
      .paybutton {
        width: 100%;
        height: 109rpx;
        margin-top: 32rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
          no-repeat;
        background-size: contain;
        font-weight: 800;
        font-size: 38rpx;
        color: #9146a0;
        line-height: 96rpx;
        text-align: center;
        // text-stroke: 1rpx #FFFFFF;
        // -webkit-text-stroke: 1rpx #FFFFFF;
      }
      .pays-agree {
        width: 100%;
        margin-top: 29rpx;
        font-size: 20rpx;
        color: #e1e1e1;
        text-align: center;
      }
    }
  }
</style>
